<template>
	<view class="container">
		<view class="box">
			<view class="title">
				<image src="/static/logo.png"></image>
				<text>云系统</text>
			</view>
			<view class="form-group">
				<view class="label">用户名</view>
				<input type="text" id="username" v-model="form.username" @focus="inputFocus" @blur="inputBlur" />
			</view>
			<view class="form-group">
				<view class="label">密码</view>
				<input type="password" id="password" v-model="form.password" @focus="inputFocus" @blur="inputBlur"
					@confirm="login" />
			</view>
			<view class="form-group" style="justify-content: unset">
				<view class="label" style="width: 6em;">保存账号密码</view>
				<switch style="transform:scale(0.6)" :checked='checked' @change='checkboxEvent' />
			</view>

			<button class="button" @click="login">登录</button>
		</view>

		<uni-popup ref="message" type="message">
			<uni-popup-message :type="popup.msgType" :message="popup.messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import akicryptojs from '@/uni_modules/aki-cryptojs/js_sdk/aki-cryptojs'
	import config from '@/static/js/config.js'
	import api from '@/static/js/api'
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
				},
				popup: {
					msgType: '',
					messageText: ''
				},
				checked: false
			};
		},
		onLoad() {
			api.getCsrfToken()
			this.readUsernameAndPassword()
		},
		methods: {
			login() {
				if (!this.form.username && !this.form.password) {
					return this.messagePopUp('warn', '你不填账号/密码我怎么知道你是谁捏~')
				}
				api.Login(this.form).then(response => {
					if (response.code === 200) {
						this.messagePopUp('success', '登录成功')
						uni.setStorageSync('user', response.data);
						this.saveUsernameAndPassword()
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/chat/chat'
							})
						}, 2000)
					} else {
						this.messagePopUp('error', response.errorMsg || response.msg)
					}
				}).catch(err => {
					this.messagePopUp('error', "网站正在更新，请耐心等候……")
				})
			},
			checkboxEvent() {
				this.checked = !this.checked
				if (this.checked) return uni.setStorageSync('save', true)
				return uni.setStorageSync('save', false)
			},
			saveUsernameAndPassword() {
				if (this.checked) return uni.setStorageSync('acount', akicryptojs.EncryptAES(JSON.stringify({
					username: this.form.username,
					password: this.form.password
				}), config.KEY, config.IV))
			},
			readUsernameAndPassword() {
				this.checked = uni.getStorageSync('save') || false
				if (this.checked) {
					this.form = JSON.parse(akicryptojs.DecryptAES(uni.getStorageSync('acount'), config.KEY, config.IV))
				}
			},
			messagePopUp(type, message) {
				this.popup.msgType = type
				this.popup.messageText = message
				this.$refs.message.open()
			},
			inputFocus(e) {
				const id = e.currentTarget.id
				document.getElementById(id).classList.add('focus')
			},
			inputBlur(e) {
				const id = e.currentTarget.id
				document.getElementById(id).classList.remove('focus')
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		width: 100%;

		.box {
			box-shadow: 0 0 15px rgba(0, 0, 5px, .2);
			border-radius: 10px;
			padding: 100px 80px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			line-height: 50px;
			background-color: rgba(255, 255, 255, .8);

			opacity: 0;
			transform: translateY(50px);
			animation: fade-in 0.3s ease-out forwards;
			
			@keyframes fade-in {
			  from {
			    opacity: 0;
			    transform: translateY(50px);
			  }
			  to {
			    opacity: 1;
			    transform: translateY(0);
			  }
			}

			.title {
				display: flex;
				justify-content: center;
				margin-bottom: 20px;

				text {
					font-size: x-large;
					font-weight: bold;
					letter-spacing: 5px;
					text-shadow: 0 0 5px rgba(0, 0, 0, .6);
					display: flex;
					align-items: center;
				}

				image {
					height: 70px;
					width: 70px;
					border-radius: 50%;
					margin-right: 10px;
				}
			}
		}

		.form-group {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 10px;

			.label {
				display: inline-block;
				width: 3em;
				text-align: center;
				text-align-last: justify;
				font-size: 16px;
				font-family: Arial, sans-serif;
				margin-right: 20px;
				text-shadow: 0 0 5px rgba(0, 0, 0, .6);
			}

			input {
				flex: 1;
				border: 1px solid #d1d1d1;
				height: auto;
				padding: 5px;
				border-radius: 5px;

				&.focus {
					border: 1px solid #999;
					box-shadow: 0 0 5px rgba(0, 0, 0, .1);
				}
			}
		}

		.button {
			width: 100%;
			margin-top: 20px;
			letter-spacing: 15px;
		}
	}
</style>